<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018/11/22
  Time: 9:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/statics/hplus/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/statics/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/statics/hplus/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/hplus/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script>
        $(function () {
            $.post("/shop/selall",function (data) {
                var opt = "";
                for (var i=0;i<data.length;i++){
                    var cust = data[i] ;
                    var sname = cust.dpname ;
                    var sid = cust.dpid ;

                    opt += "<option value="+sid+">"+sname+"</option>" ;
                }
                $("select[name='customerid']").append(opt);
            })
            $.post("/ygxx/selall",function (data) {
                var opt = "";
                for (var i=0;i<data.length;i++){
                    var cust = data[i] ;
                    var yid = cust.ygid ;
                    var yname = cust.ygname ;

                    opt += "<option value="+yid+">"+yname+"</option>" ;
                }
                $("select[name='ygxxid']").append(opt);
            })
            $("#spjj").change(function(){
                var jinjia = $("#spjj").val();
                var shuliang = $("#count").val();
                var zongjia = jinjia * shuliang;

            })
            $("#count").change(function(){
                var jinjia = $("#spjj").val();
                var shuliang = $("#count").val();
                var zongjia = jinjia * shuliang;
                $("#num").html(zongjia);
            })

        })
        function toadd() {
            $("#modelId").modal("show") ;
        }
        function doadd() {
            $("#model").modal("show") ;
        }
       /* var spname = $("#spid").html();
        alert(spname);*/
        function searcha() {
            $("#shangpin").show();
            //返回表格的 Options。
            var opts = $("#roletb").bootstrapTable("getOptions") ;
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            var name = $("#username").val() ;
            $.post("${pageContext.request.contextPath}/shangp/querySearch",{'spname':name,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#roletb").bootstrapTable('load',data) ;
            })
        }
        $(function () {
            $("#roletb").on("dbl-click-row.bs.table",function (e,row,ele) {
                $("#id").html(row.spid);
                $("#spname").html(row.spname);
                $("#stname").html(row.stname);
                $("#dwname").html(row.dwname);
                $("#username").val(row.spname);
                $("#shangpin").hide();
            })


            $("#roletb").bootstrapTable({
                url:'${pageContext.request.contextPath}/shangp/querySearch',
                //设置每页多少条数据
                pageSize:2,
                pageList:[2,4,6,8],
                height:500,
                pageNumber:1,
                rowStyle: function (row, index) {
                    var style = {};
                    style={css:{'font-size':'14px'}};
                    return style;
                },
                height:200,
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                //启用服务器端分页
                sidePagination:'server',
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        name:$("#username").val()
                    };
                    return temp;
                },
                columns:[
                    {
                        field:'spid',
                        title:'编号',
                    },
                    {
                        field:'spname',
                        title:'名称'
                    },
                    {
                        field:'stname',
                        title:'分类'
                    },
                    {
                        field:'dwname',
                        title:'单位'
                    },
                ]
            }) ;
        }) ;
        var id;
        var name;
        var type;
        var dw;
        var shu;
        var jinjia;
        var zongjia;
        var jinglei="";
        var zong=0;
        var count =0;
    function qwe() {
        jinglei="";
        $("#modelId").modal("hide");
        id = $("#id").html();
        name = $("#spname").html();
        type = $("#stname").html();
        dw = $("#dwname").html();
        shu = $("#count").val();
        jinjia = $("#spjj").val();
        zongjia = $("#num").html();
        zong+=parseInt(zongjia);
        count+=parseInt(shu);
        $("#sfje").val(zong);
        jinglei += "<tr><td id=\"sid\">"+id+"</td>\n" +
            "            <td id=\"name\">"+name+"</td>\n" +
            "            <td id=\"type\">"+type+"</td>\n" +
            "            <td id=\"dw\">"+dw+"</td>\n" +
            "            <td id=\"gg\"></td>\n" +
            "            <td id=\"scount\">"+shu+"</td>\n" +
            "            <td id=\"jinjia\">"+jinjia+"</td>\n" +
            "            <td id=\"zongjia\">"+zongjia+"</td></tr>";
        $("#roletb1").append(jinglei);
        jinglei="";
        $("#modelId").modal("hide");
        $("#username").val("");
        $("#id").html("");
        $("#spname").html("");
        $("#stname").html("");
        $("#dwname").html("");
        $("#count").val("");
        $("#spjj").val("");
        $("#num").html("");
    }
    function  add() {
        var crtype = $('[name=caozuotype]').val();
        var crnumber = count;
        var yfprice = $("#sfje").val();
        var ygid = $('[name=ygxxid]').val();
        var dpid = $('[name=customerid]').val();
        var crhao = $('[name=djh]').html();
        var state = 1;
        var beizhu = $("#beizhu").val();
        $.post("${pageContext.request.contextPath}/crku/add",{'crtype':crtype,'crnumber':crnumber,'yfprice':yfprice,'sfprice':yfprice,'ygid':ygid,'dpid':dpid,'crhao':crhao,'state':state,'beizhu':beizhu},function (data) {
            // var mydata = eval("("+data+")") ;
            //重新绑定表格数据crhao
            location.reload();
        })
    }

    </script>
</head>
<body>
<div class="row">
    <%--<form action="" method="post">--%>
    <div id="wen" class="col-sm-8">
        <h4 style="margin-left: 400px;font-family: 楷体">产品入库</h4>

        <div class="form-group">
            <div class="col-sm-6">
                <label class=" control-label" >操作类型:</label>
                <select name="caozuotype" class="form-control">
                    <option value="产品进货">产品进货</option>
                    <option value="产品报溢">产品报溢</option>
                    <option value="其他入库">其他入库</option>
                </select>
            </div>
            <div class="col-sm-6">
                <label class=" control-label">单据号:</label>
                <h5 name="djh">134566413451312</h5>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-6">
                <label class=" control-label" >操作店铺:</label>
                <select name="customerid" class="form-control">

                </select>
            </div>
            <div class="col-sm-6">
                <label class="control-label">经办员工:</label>
                <select name="ygxxid" class="form-control">

                </select>
            </div>
        </div>
        <div class="form-group">

            <div class="col-sm-6">
                <label class="control-label" >实付金额:</label><input id="sfje" type="text" class="form-control">
            </div>

            <div class="col-sm-6">
                <label class="control-label">备注:</label><input id="beizhu" type="text" class="form-control">
            </div>
        </div>
    </div>
        <div id="addshangpin">
            <table id="roletb1">
                    <th>编号</th>
                    <th>名称</th>
                    <th>分类</th>
                    <th>单位</th>
                    <th>规格</th>
                    <th>数量</th>
                    <th>进价</th>
                    <th>总价</th>
            </table>
        </div>
        <button class="btn btn-primary" style="margin-left: 600px" onclick="toadd()"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;添加商品</button>
        <input class="btn btn-primary" type="button" onclick="add()" value="&nbsp;&nbsp;提交" />
    <%--</form>--%>
    </div>
<!--添加模态框-->
<div class="modal fade" id="modelId">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelTitleId">提示</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"></span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row col-sm-12" >
                    <label>选择商品:<input id="username" type="text" class="form-control" id="spid"></label><span class="glyphicon glyphicon-search" style="margin-left: 10px" onclick="searcha()"></span>
                </div>
                    <div class="form-group">
                        <label class="col-sm-12 control-label" style="background-color: #F1F0ED;padding: 4px;margin: 0px">商品信息</label>
                    </div>
                <div>
                    <div class="row">
                    <div class="col-sm-6">
                        <label>名称:</label><span id="spname"></span>
                    </div>
                    <div class="col-sm-6">
                        <label>编号:</label><span id="id"></span>
                    </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <label>进价:<input type="text" class="form-control" id="spjj"></label>
                        </div>
                        <div class="col-sm-6">
                            <label>分类:</label><span id="stname"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <label>单位:</label><span id="dwname"></span>
                        </div>

                    </div>

                </div>
                <div class="form-group">
                    <label class="col-sm-12 control-label" style="background-color: #F1F0ED;padding: 4px;margin: 0px">库存信息</label>
                </div>
                <div class="row col-sm-12" >
                    <label>数量:<input id="count" type="text" class="form-control"></label><span id="num"></span>
                </div>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" onclick="qwe()">确定</button>
            </div>
        </div>
    </div>
</div>
<div id="shangpin" style="border:3px solid #F5F5F5;left: 480px; top: 157px; width: 500px; display: none; position: absolute; z-index: 99999; background-color: white">
    <table class="table table-striped" id="roletb"></table>
</div>
</body>
</html>
